<!--%import("js/slidedeck.jquery.lite.js")-->
<!--%import("../prettyPhoto/prettyPhoto.css")-->
<!--%import("../prettyPhoto/jquery.prettyPhoto.js")-->

<!--// 멀티스킨 사용을 위해 변수 또는 ID 랜덤 지정 -->
{@$skin_id = "slideDeck_".mt_rand()}
{@$slider_id = $skin_id}

<!--// prettyPhoto 테마 -->
<!--@if(!$widget_info->ptypoto_theme)-->
{@$prettyPhoto_theme = "pp_default"}
<!--@else-->
{@$prettyPhoto_theme = $widget_info->ptypoto_theme}
<!--@end-->

<!--// 제목 폰트 크기와 글꼴 정의 -->
<!--@if($widget_info->title_font_size)-->
{@$title_font_size = $widget_info->title_font_size}
<!--@else-->
{@$title_font_size = 14}
<!--@end-->

<!--@if($widget_info->title_font_color)-->
{@$title_font_color = $widget_info->title_font_color}
<!--@else-->
{@$title_font_color = '#000'}
<!--@end-->

<!--@if($widget_info->title_font_family!="Default")-->
{@$title_font_family = $widget_info->title_font_family}
<!--@else-->
{@$title_font_family = "돋움,'Trebuchet MS', Verdana, sans-serif"}
<!--@end-->

<!--// 제목 폰트 직접 입력인 경우 -->
<!--@if($widget_info->title_font_user!="")-->
{@$title_font_family = $widget_info->title_font_user}
<!--@end-->

<!--// 제목+카테고리 높이(50px) -->
<!--@if(!$widget_info->title_height)-->
{@$textT1_Height = 23}
<!--@else-->
{@$textT1_Height = $widget_info->title_height}
<!--@end-->

<!--// 내용의 폰트 크기와 글꼴 정의 -->
<!--@if($widget_info->content_font_size)-->
{@$content_font_size = $widget_info->content_font_size}
<!--@else-->
{@$content_font_size = 11}
<!--@end-->

<!--@if($widget_info->content_font_color)-->
{@$content_font_color = $widget_info->content_font_color}
<!--@else-->
{@$content_font_color = '#000'}
<!--@end-->

<!--@if($widget_info->content_font_family!="Default")-->
{@$content_font_family = $widget_info->content_font_family}
<!--@else-->
{@$content_font_family = "돋움,'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, sans-serif"}
<!--@end-->

<!--// 내용 폰트 직접 입력인 경우 -->
<!--@if($widget_info->content_font_user!="")-->
{@$content_font_family = $widget_info->content_font_user}
<!--@end-->

<!--// 내용 높이(50px) -->
<!--@if(!$widget_info->content_height)-->
{@$textC1_Height = 50}
<!--@else-->
{@$textC1_Height = $widget_info->content_height}
<!--@end-->

<!--// 배경 이미지 경로 -->
{@$skincssimgpath = getSiteUrl()."widgets/contentslider/skins/slideDeck/js"}

<style type="text/css">
.textT1_{$skin_id}, .textT1_{$skin_id} a, .textT1_{$skin_id} a:visited {
	color:{$title_font_color};
	font-family: {$title_font_family};
	font-size: {$title_font_size}px;
	text-decoration: none;
	height: {$textT1_Height}px;
	<!--@if($widget_info->show_title=='Y')-->display:block;<!--@else-->display:none;<!--@end-->
}
.textT1_{$skin_id} a:hover, .textT1_{$skin_id} a:focus {
	text-decoration: underline;
}

.textC1_{$skin_id}, .textC1_{$skin_id} a, .textC1_{$skin_id} a:visited {
	text-align:justify;
	color:{$content_font_color};
	font-family: {$content_font_family};
	font-size: {$content_font_size}px;
	text-decoration: none;
	<!--@if($widget_info->show_content=='Y')-->display:block;<!--@else-->display:none;<!--@end-->
}
.textC1_{$skin_id} a:hover, .textC1_{$skin_id} a:focus {
	text-decoration: underline;
}

#{$slider_id} {
	width: {$widget_info->slider_img_width}px;
	height: {$widget_info->slider_img_height}px;
} 

.skin-slidedeck {
    position: relative;
	padding: 11px 11px 24px;
    background: url('{$skincssimgpath}/back.png') 0 0 #d7d7d7;
    border: 14px solid #fff;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.skin-slidedeck dl.{$skin_id} {
    position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
    padding: 0;
}

.skin-slidedeck dl.{$skin_id} > dd {
    position: relative;
	height: {$widget_info->slider_img_height}px; /* 294 */
	padding: 10px 15px;
    margin: 0;
	border-right: 5px solid #d7d7d7;
	background: url('{$skincssimgpath}/slides.png') bottom left #d7d7d7;    /* Note: you should position the background with pixel measurements in IE7 as it improperly calculates the height of the DD element when containing vertical slides */
    overflow: hidden;
}

.skin-slidedeck dl.{$skin_id} > dt {
    position: relative;
	cursor: pointer;
	height: 43px;
	line-height: 38px;
	font-size: 12px;
	font-weight: bold;
	font-family: "맑은 고딕","Futura Bold", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	background: url('{$skincssimgpath}/spines.png') top left #d7d7d7;
	color: #505050;
    margin: 0;
    padding: 0;
}

.skin-slidedeck dl.{$skin_id} dt.spine:hover {
	color: #000;
	background-position: center left;
}

.skin-slidedeck dl.{$skin_id} dt.spine.active,
.skin-slidedeck dl.{$skin_id} dt.spine.active:hover {
	cursor: default;
	color: #fff;
	background-position: bottom left;
}

.skin-slidedeck dl.{$skin_id} dt.spine .index {
	margin-bottom: 2px;
    font-size: 24px;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	color: #505050;
}
.skin-slidedeck dl.{$skin_id} dt.spine.active .index { margin-bottom: 0; }

.skin-slidedeck dl.{$skin_id} dt.spine:hover .index { color: #000000; }

.skin-slidedeck dl.{$skin_id} dt.spine.active .index { color: #ffffff; }

.skin-slidedeck dl.{$skin_id} .activeCorner {
	margin-left: -6px;
	background-image: url('{$skincssimgpath}/corner.png');
	width: 12px;
	height: 25px;
}

#{$skin_id} .lightbox_image {
	width:{$widget_info->thumbnail_width}px;
	height:{$widget_info->thumbnail_height}px;
	float:left;
	display:block;
	background:url('{$skincssimgpath}/magnify.png') no-repeat center center;
}

#{$skin_id} .lightbox_video {
	width:{$widget_info->thumbnail_width}px;
	height:{$widget_info->thumbnail_height}px;
	float:left;
	display:block;
	background:url('{$skincssimgpath}/video.png') no-repeat center center;
}

#{$skin_id} .no_image {
	width:{$widget_info->thumbnail_width}px;
	height:{$widget_info->thumbnail_height}px;
	float:left;
	display:block;
	background:url('{$skincssimgpath}/no_image.png') no-repeat center center;
}

#{$skin_id} .open_doc {
	width:{$widget_info->thumbnail_width}px;
	height:{$widget_info->thumbnail_height}px;
	float:left;
	display:block;
	background:url('{$skincssimgpath}/document.png') no-repeat center center;
}

</style>

<!--@if($widget_info->content_items_shuffle=='Y')-->
{@shuffle($widget_info->content_items)}
<!--@end-->
{@$img_idx=0}
<div id="{$slider_id}" class="skin-slidedeck">
	<dl class="{$skin_id}">
	<!--@foreach($widget_info->content_items as $key => $item)-->
    <dt>{$item->getTitle($widget_info->subject_cut_size)}</dt>
    <dd>
		<h4 class="textT1_{$skin_id}"><a href="{$item->getLink()}">{$item->getTitle(0)}</a></h4>
		<!--@if($item->getThumbnail())-->
		<!--@if($widget_info->open_article=='Z')-->
			<!--@if($widget_info->target_ext_var=='link'&&$item->getLinkedType()!=''||$widget_info->target_ext_var=='image'&&$item->getLinkedType()!='')-->
			<a href="{$item->getLink()}" rel='prettyPhoto[mixed]' />
			<!--@elseif($item->getThumbnail())-->
			<a href="{$item->getPreview()}" rel='prettyPhoto[mixed]' />
			<!--@else-->
			<a class="no_image" />
			<!--@end-->
		<!--@elseif($widget_info->open_article=='Y')-->
			<!--@if($widget_info->target_ext_var=='link'&&$item->getLinkedType()!=''||$widget_info->target_ext_var=='image'&&$item->getLinkedType()!='')-->
			<a href="{$item->getLink()}" rel='prettyPhoto[mixed]' />
			<!--@elseif($item->getThumbnail())-->
			<a href="{$item->getDocumentSrl()}" class="open_doc" />
			<!--@else-->
			<a href="{$item->getDocumentSrl()}" class="open_doc" />
			<!--@end-->
		<!--@else-->
			<!--@if($widget_info->target_ext_var=='link'&&$item->getLinkedType()!=''||$widget_info->target_ext_var=='image'&&$item->getLinkedType()!='')-->
			<a href="{$item->getLink()}" rel='prettyPhoto[mixed]' />
			<!--@elseif($item->getThumbnail())-->
			<a />
			<!--@else-->
			<a class="no_image" />
			<!--@end-->
		<!--@end-->
		<img src="{$item->getThumbnail()}" width="{$widget_info->thumbnail_width}" height="{$widget_info->thumbnail_height}" alt='{$item->getTitle(0)}' style="background:#ffffff;border:1px solid #d7d7d7;padding:5px;" <!--@if($widget_info->img_fade=='Y'&&$widget_info->open_article!='N')-->class='fade'<!--@end--> /></a><!--@end-->
		<p class="textC1_{$skin_id}" style="margin-top:10px;">
		<a href="{$item->getLink()}">{$item->getContent($widget_info->content_cut_size)}</a></p>
	</dd>
	<!--@end-->
	</dl>
</div>
<script type="text/javascript">
	jQuery(document).ready(function($){
	// The most basic implementation using the default options
	$('.{$skin_id}').slidedeck({
		autoPlay: {$widget_info->slide_auto},
		cycle: true, 
		autoPlayInterval: {$widget_info->slide_delay} 
	});

<!--@if($widget_info->open_article!='N'||$widget_info->target_ext_var=='link'||$widget_info->target_ext_var=='image')-->
	if ($.browser.msie && $.browser.version < 7) return; // Don't execute code if it's IE6 or below cause it doesn't support it.
	$(".fade").fadeTo(1, 1);
	$(".fade").hover(function () {
		$(this).fadeTo("fast", 0.33);
	}, function () {
		$(this).fadeTo("slow", 1);
	});
	$(".{$skin_id}").find("a[rel^='prettyPhoto']").prettyPhoto({theme:'{$prettyPhoto_theme}'});

	$("a[rel^='prettyPhoto']").each(function() {
		var $image = jQuery(this).contents("img");
		$newclass = 'no_image';
		if($(this).attr('href').toLowerCase().match(/youtube\.com\/watch/i)) $newclass = 'lightbox_video';
		else if($(this).attr('href').toLowerCase().match(/vimeo\.com/i)) $newclass = 'lightbox_video';
		else if($(this).attr('href').toLowerCase().match(/(mov|swf)/i)) $newclass = 'lightbox_video';
		else if($(this).attr('href').toLowerCase().match(/(jpg|gif|jpeg|png)/i)) $newclass = 'lightbox_image';
		else $(this).removeClass("fade");
		var $padding_x = parseInt($image.css('padding-left')) + parseInt($image.css('padding-right')),
			$padding_y = parseInt($image.css('padding-top')) + parseInt($image.css('padding-bottom')),
			$margin_x = parseInt($image.css('margin-left')) + parseInt($image.css('margin-right')),
			$margin_y = parseInt($image.css('margin-top')) + parseInt($image.css('margin-bottom')),
			$border_x = parseInt($image.css('border-left-width')) + parseInt($image.css('border-right-width')),
			$border_y = parseInt($image.css('border-top-width')) + parseInt($image.css('border-bottom-width'));
		$height = parseInt($image.height()) + $margin_x + $padding_x + $border_x;
		$width = parseInt($image.width()) + $margin_y +  $padding_y + $border_y;
		$pos =  $image.position();
		$(this).addClass($newclass).css({height:$height, width:$width, top:$pos.top, left:$pos.left});
	});
<!--@end-->
	});
</script>
